<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      /*  window.onload = function () {
        var boxEle = document.querySelector(".box");
        console.log(boxEle);
      };
      window.onload = function () {
        console.log("111");
      }; */
    </script>
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
    <button>点击我设置卷去的高度</button>
    <script>
      //浏览器事件
      //1.window.onload: 浏览器dom 和资源加载完毕的时候执行的函数
      //   window.onload = function () {
      //     console.log("dom加载完毕了");
      //   };
      /*  window.onload = function () {
        console.log("222");
      };
      var onload;

      onload = function () {
        console.log(111);
      };

      onload = function () {
        console.log(222);
      };
      onload(); */

      //2.window.scroll事件: 浏览器窗口在滚动的时候触发
      //scroll滚动
      //获取浏览器的卷去高度 或者是左边卷去的距:scrollTop
      //可以设置浏览器的卷去高度
      //第一种方式: document.documentElement.scrollTop 页面有文档声明的时候使用
      //document.documentElement.scrollTop;
      //第二种方式: 如果没有文档声明 需要通过document.body.scrollTop
      //   window.onscroll = function () {
      //     // console.log("滚动了");
      //     //console.log(document.documentElement.scrollTop);
      //     //console.log(document.body.scrollTop); //有声明document的时候body不适用
      //     var scrollTop =
      //       document.documentElement.scrollTop || document.body.scrollTop;
      //     console.log(scrollTop);
      //   };

      //设置卷去的高度
      document.querySelector("button").onclick = function () {
        document.documentElement.scrollTop = 300;
      };
    </script>
  </body>
</html>
